/**
 * Site Selector
 * @component `selector`
 */
.site-selector {
	overflow: visible;
	position: static;
	pointer-events: auto;
	border: none;
	z-index: z-index( 'root', '.site-selector' );

	&.is-large .search  {
		display: flex;
		position: relative;
		opacity: 1;
		pointer-events: initial;
	}

	&.is-large .site-selector__sites {
		border-top: 1px solid lighten( $gray, 20% );
	}

}

// Styles for Site elements within the Selector
.site-selector .site,
.site-selector .all-sites {
	font-size: 14px;

	// Highlight selected site
	&.is-selected {
		background-color: $gray;

		.site__badge {
			color: $white;
		}

		.site__title,
		.site__domain {
			color: $white;
			&::after {
				@include long-content-fade( $color: $gray );
			}
		}

		.count {
			border-color: $white;
			color: $white;
		}

		&.is-private .site__title::before {
			color: $white;
		}
	}
}

// Highlight & hover effects
.site-selector .site.is-highlighted,
.site-selector .all-sites.is-highlighted,
.notouch .site-selector.is-hover-enabled .site:hover,
.notouch .site-selector.is-hover-enabled .all-sites:hover {
	background: $blue-medium;
	cursor: pointer;

	.site__badge {
		color: $white;
	}

	.site__title,
	.site__domain {
		color: white;
		&::after {
			@include long-content-fade( $color: $blue-medium );
		}
	}

	.site__title:before {
		color: white;
	}

	.count {
		border-color: $white;
		color: $white;
	}
}

.site-selector .search {
	margin: 8px;
	width: auto;
	height: 33px;
	border: 1px solid lighten( $gray, 20% );
	display: block;
	opacity: 0;
	position: absolute;
	pointer-events: none;

	.search__input[type="search"] {
		font-size: 13px;
	}

	.search__open-icon,
	.search__close-icon {
		color: $gray;
		width: 32px;
		height: 18px;
	}

}

// The actual list of sites
.site-selector__sites {
	max-height: calc( 100% - 93px );
	overflow-y: auto;

	@include breakpoint( "<660px" ) {
		max-height: calc( 100% - 109px );
	}
}

.site-selector__no-results {
	color: $gray;
	font-style: italic;
	padding: 10px 20px;
}

.site-selector__add-new-site {
	padding: 0;
	border-top: 1px solid darken( $sidebar-bg-color, 10% );
	margin: auto 0 0;
	display: flex;
	flex-direction: row;
	padding-left: 10px;

	@include breakpoint( "<660px" ) {
		margin-top: 16px;
	}
}

.site-selector__add-new-site .button {
	box-sizing: border-box;
	display: inline-block;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	padding: 8px;
	color: darken( $gray, 10% );
	line-height: 2.1;

	&:hover {
		color: $gray-dark;
	}

	@include breakpoint( "<660px" ) {
		padding: 16px;
	}

	.gridicon {
		display: block;
		float: left;
		margin-right: 6px;
		top: auto;
		margin-top: auto;
	}
}

// Containers in the list of sites are larger
.site-selector .site-action {
	padding-top: 15px;
}

.site-selector .all-sites {
	border-bottom: 1px solid lighten( $gray, 20% );
}

.site-selector__recent {
	border-bottom: 1px solid lighten( $gray, 30% );

	&:empty {
		border-bottom-width: 0;
	}
}

.site-selector__hidden-sites-message {
	color: $gray;
	display: block;
	font-size: 12px;
	padding: 16px 16px 24px;

	.site-selector__manage-hidden-sites {
		color: $gray;
		text-decoration: underline;
	}
}

.site-selector__no-results + .site-selector__hidden-sites-message {
	display: none;
}
